<template>
  <el-col :xs="sizeI[0]" :sm="sizeI[1]" :md="sizeI[2]" :lg="sizeI[3]" :xl="sizeI[4]" v-bind="$attrs" v-on="$listeners">
    <div v-if="show" class="col">
      <div class="label">
        <slot v-if="$scopedSlots.label" name="label" />
        <template v-else>
          {{ label }}
        </template>
      </div>
      <span v-if="colon" class="colon">:</span>
      <div class="value">
        <slot v-if="$scopedSlots.value" name="value" />
        <template v-else>
          {{ value }}
        </template>
      </div>
    </div>
    <slot />
  </el-col>
</template>
<script>
export default {
  props: {
    label: {},
    value: {},
    colon: {
      type: Boolean,
      default: true
    },
    size: {
      type: [Number, Array],
      default: () => {
        return [24, 12, 12, 8, 6] // 分别对应 xs、sm、md、lg、xl
      }
    }
  },
  computed: {
    sizeI() {
      let arr = []
      if (Array.isArray(this.size)) {
        if (this.size.length > 0) {
          arr = this.size
        } else {
          arr = [24, 12, 12, 8, 8]
        }
      } else {
        arr = new Array(5).fill(this.size)
      }
      return arr
    },
    show() {
      return this.$scopedSlots.label || this.label || this.$scopedSlots.value || this.value
    }
  }
}
</script>
<style lang="scss" scoped>
.col {
  display: flex;
  padding: 5px;
  align-items: flex-start;
  line-height: 1.2;
  font-size: 13px;
  word-break: break-all;

  .label {
    width: 80px;
    min-width: fit-content;
    text-align: right;
  }
  .colon {
    padding-right: 10px;
  }
  .value {
    flex: 1;
    display: flex;
    align-items: flex-start;
  }
}
</style>
